import React, {Component} from 'react'
import {connect} from 'react-redux'
import {
    Link
} from 'react-router-dom';

import { Menu, Icon } from 'antd'
import {getMenuList} from '$actions/menuList'
import './menuList.less'

const SubMenu = Menu.SubMenu


class MenuList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            index: null
        }
    }

    componentDidMount() {
        this.props.getMenuList();
    }

    selectHandler(list) {
        let {pathname} = this.props;

        if(list) {
            let index = null;
            list.map((v,i) => {
                if(pathname == v.path){
                    index = v.key;
                }
            })

            let arr = [];
            arr[0] = index;

            return arr;
        }

    }

    renderList(list) {
        let res;
        if(list){
            res = list.map((v,i) => 
                <Menu.Item key={v.key}>
                    <Link to={v.path}>
                        <Icon type={v.type} />
                        <span>{v.name}</span>
                    </Link>
                </Menu.Item>
            )

            return (
                <Menu className='menu-list' theme="dark" mode="inline" defaultSelectedKeys={this.selectHandler(list)}>
                    {res}
                </Menu>
            );   
        }

    }

    render() {
        return (
            <div>
                {this.renderList(this.props.menuList.menuList.list)}
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        menuList: state.menuList
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getMenuList: function() {
            dispatch(getMenuList());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MenuList)